import React, { useState } from 'react';
import './Hero.css';

const Hero: React.FC = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleGetStarted = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
      const featuresSection = document.getElementById('features');
      if (featuresSection) {
        featuresSection.scrollIntoView({ behavior: 'smooth' });
      }
    }, 1000);
  };

  return (
    <section className="hero" id="home">
      <div className="container">
        <div className="hero-content">
          <h1 className="hero-title fade-in-up">
            开启你的<br />
            <span className="gradient-text">AI创作之旅</span>
          </h1>
          <p className="hero-subtitle fade-in-up">
            即刻造梦！让想象变为现实
          </p>
          <button 
            className="cta-button fade-in-up" 
            onClick={handleGetStarted}
            disabled={isLoading}
          >
            {isLoading ? (
              <>
                <span className="loading-spinner"></span>
                加载中...
              </>
            ) : (
              '开始创作'
            )}
          </button>
        </div>
        <div className="hero-visual fade-in-up">
          <div className="floating-elements">
            <div className="floating-element element-1">🎨</div>
            <div className="floating-element element-2">🎬</div>
            <div className="floating-element element-3">👤</div>
            <div className="floating-element element-4">✨</div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;
